const autoprefixer = require('autoprefixer')
const colors = require('tailwindcss/colors')
const defaultTheme = require('tailwindcss/defaultTheme')
function setRemParam(stap, start, total) {
  const param = {}
  for (let i = start; i < total; i = i + stap) {
    param['r' + i.toFixed(1)] = i.toFixed(1) + 'rem'
  }
  return param
}
const remParam = setRemParam(0.1, 0.1, 100)
module.exports = {
  purge: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  corePlugins: {
    divideWidth: true,
  },
  theme: {
    container: {
      center: true,
    },
    screens: {
      sm: '728px',
      md: '1024px',
      lg: '1280px',
      xl: '1367px',
      '2xl': '1536px',
      '3xl': '1921px',
    },
    fontFamily: {
      regular: ['PingFangSC-Regular', 'PingFang SC'],
      semibold: ['PingFangSC-Semibold', 'PingFang SC'],
      SFProDisplay: ['SFProDisplay-Semibold', 'SFProDisplay;'],
      'medium-family': ['PingFangSC-Medium', 'PingFang SC'],
    },
    fontSize: {
      ...remParam,
    },
    maxWidth: (theme, { breakpoints }) => ({
      none: 'none',
      0: '0rem',
      xs: '20rem',
      sm: '24rem',
      'semi-sm': '26rem',
      md: '28rem',
      lg: '32rem',
      xl: '36rem',
      '2xl': '42rem',
      '3xl': '48rem',
      '4xl': '56rem',
      '5xl': '64rem',
      '6xl': '72rem',
      '7xl': '80rem',
      full: '100%',
      min: 'min-content',
      max: 'max-content',
      prose: '65ch',
      ...breakpoints(theme('screens')),
    }),
    minWidth: {
      3: '3rem',
      4: '4rem',
    },
    maxHeight: {
      md: '28rem',
      '5xl': '50rem',
      '8vh': '80vh',
    },
    minHeight: {
      '4vh': '40vh',
    },
    zIndex: {
      auto: 'auto',
      0: '0',
      10: '10',
      20: '20',
      30: '30',
      40: '40',
      50: '50',
      100: '100',
      999: '999',
      1000: '1000',
      1001: '1001',
      2000: '2000',
      2001: '2001',
      9999: '9999',
    },
    colors: {
      primary: {
        lighter: '#EBEDF3',
      },
      gray: {
        50: '#f8f8f8',
        '878E9A': '#878E9A',
        F5F5F6: '#F5F5F6',
        F7F7F8: '#F7F7F8',
        999999: '#999999',
        333333: '#333333',
        323233: '#323233',
        212831: '#212831',
        666666: '#666666',
        '858c96': '#858c96',
        '868D9A': '#868D9A',
        '868D9B': '#868D9B',
        F9F9F9: '#F9F9F9',
        adb4be: '#adb4be',
        e5eef9: '#e5eef9',
        D6D6D6: '#D6D6D6',
        d8d8d8: '#d8d8d8',
        '5b6169': '#5b6169',
        '2e2d2d': '#2e2d2d',
      },
      white: {
        DEFAULT: '#ffffff',
        F3F3F4: '#F3F3F4',
      },
      orange: {
        ...colors.orange,
        E4C484: '#E4C484',
        FFF5E8: '#FFF5E8',
        DEBE86: '#DEBE86',
        F59040: '#F59040',
        FC8D45: '#FC8D45',
        DCAF80: '#DCAF80',
        E29A09: '#E29A09',
        FFF5E0: '#FFF5E0',
        f13232: '#f13232',
        FF9D00: '#FF9D00',
        BE8243: '#BE8243',
        FF664F: '#FF664F',
        FF3627: '#FF3627',
        FF0000: '#FF0000',
      },
      blue: {
        ...colors.blue,
        '4493fe': '#4493fe',
        FF664F: '#FF664F',
        FF3627: '#FF3627',
        FF0000: '#FF0000',
      },
      blue: {
        ...colors.blue,
        '02A9F1': '#02A9F1',
      },
      red: {
        ...colors.red,
        E02727: '#E02727',
        FF4A4A: '#FF4A4A',
        e24646: '#e24646',
        FF3627: '#FF3627',
        EC082E: '#EC082E',
      },
      green: {
        ...colors.green,
        '07C160': '#07C160',
      },
      black: {
        DEFAULT: '#000000',
        212831: '#212831',
      },
    },
    extend: {
      width: {
        ...remParam,
      },
      padding: {
        ...remParam,
      },
      margin: {
        ...remParam,
      },
      height: {
        ...remParam,
      },
      borderRadius: {
        ...remParam,
      },
      lineHeight: {
        ...remParam,
      },
      inset: {
        ...remParam,
      },
    },
    flex: {
      1: '1 1 0%',
      1.1: '1 1 10%',
      1.125: '1 1 12.5%',
      1.2: '1 1 20%',
      1.3: '1 1 30%',
      1.7: '1 1 70%',
      auto: '1 1 auto',
      initial: '0 1 auto',
      inherit: 'inherit',
      none: 'none',
    },
    boxShadow: {
      bs2: '2px 2px 6px 0 hsl(0deg 0% 80% / 50%)',
      bs3: '0px 2px 10px 0px rgba(32,34,46,0.04)',
      bs4: '0px 2px 8px 0px rgba(32,34,46,0.04)',
      bs4: ' 0px 4px 10px -2px rgba(183,36,24,0.3)',
      bs5: '0px 0px 8px 0px rgba(128,128,164,0.06)',
      bs6: '0px 2px 4px 0px rgba(157,33,24,0.17)',
    },
  },
  variants: {
    extend: {
      textColor: ['active'],
    },
  },
  plugins: [require('@tailwindcss/line-clamp')],
}
